<template>
  <div>
    <nav-header @add="recieveHeaderData"></nav-header>
    <NavMain :list="list" @del="del"></NavMain>
    <NavFooter :list="list" @clear="clear"></NavFooter>
  </div>
</template>

<script setup>
import NavHeader from '@/components/navHeader/NavHeader.vue'
import NavMain from '@/components/navMain/NavMain.vue'
import NavFooter from '@/components/navFooter/NavFooter.vue'
import {ref, computed} from 'vue'
import {useStore} from 'vuex'

const store = useStore();
// 获取list
let list = computed(() => {
  store.commit('getHistory', 'taskList')
  return store.state.list
})

let value = ref('')

const recieveHeaderData = (headerData) => {
  value.value = headerData;
  console.log(value.value);
  // 先判断有没有存在的任务 如果存在 不能重复添加
  let flag = true;
  list.value.map(item => {
    if (item.title === value.value) {
      // 有重复的任务
      flag = false
      alert('任务已存在')
    }
  })
  // 调用mutation修改list
  if (flag) {
    store.commit('addTodo', {
      title: value.value,
      complete: false
    })

    // 存入缓存
    store.commit('saveHistory', 'taskList')
  }
}
// 删除任务，获取emit分发事件传来的参数值
const del = (val) => {
  console.log(val)
  // 调用删除的mutation修改list
  store.commit('delTodo', val)
  // 存入缓存
  store.commit('saveHistory', 'taskList')
}
// 清除已完成任务
const clear = (val) => {
  console.log(val)
  store.commit('clear', val)
  // 存入缓存
  store.commit('saveHistory', 'taskList')
}
</script>

<style scoped lang="scss"></style>